
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>CSS <span class="color_h1">轮廓（outline）</span>
</h1>
<hr/>
<p class="intro">轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。</p>
<p class="intro">轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。</p>
<hr/>
<h2>轮廓（outline）实例</h2>
<p>
<a  target="_blank">在元素周围画线</a><br/>
本例演示使用outline属性在元素周围画一条线。</p>
<p>
<a  target="_blank">设置轮廓的样式</a><br/>
本例演示如何设置轮廓的样式。</p>
<p>
<a  target="_blank">设置轮廓的颜色</a><br/>
本例演示如何设置轮廓的颜色。</p>
<p>
<a  target="_blank">设置轮廓的宽度</a><br/>
本例演示如何设置轮廓的宽度。</p>
<hr/>
<h2>CSS 轮廓（outline）</h2>
<p>轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。</p>
<p>CSS outline 属性规定元素轮廓的样式、颜色和宽度。</p>
<img alt="Outline" decoding="async" fetchpriority="high" height="289" src="/images/box_outline.gif" width="536"/><br/><hr/>
<h2>所有CSS 轮廓（outline）属性</h2>
<p>"CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。 </p>
<table border="1" cellpadding="0" cellspacing="0" class="reference" width="100%">
<tbody><tr>
<th align="left" width="20%">属性</th>
<th align="left" width="53%">说明</th>
<th align="left" width="20%">值</th>
<th align="left" width="7%">CSS</th>
</tr>
<tr>
<td><a >outline</a>
</td>
<td>在一个声明中设置所有的轮廓属性</td>
<td><i>outline-color<br/>
      outline-style<br/>
      outline-width<br/>
</i>inherit</td>
<td>2</td>
</tr>
<tr>
<td>
<a >
      outline-color</a>
</td>
<td>设置轮廓的颜色</td>
<td><i>color-name<br/>
	hex-number<br/>
	rgb-number<br/>
</i>invert<br/>
	inherit</td>
<td>2</td>
</tr>
<tr>
<td>
<a >
      outline-style</a>
</td>
<td>设置轮廓的样式</td>
<td>none<br/>
      dotted<br/>
      dashed<br/>
      solid<br/>
      double<br/>
      groove<br/>
      ridge<br/>
      inset<br/>
      outset<br/>
	inherit</td>
<td>2</td>
</tr>
<tr>
<td>
<a >
      outline-width</a>
</td>
<td>设置轮廓的宽度</td>
<td>thin<br/>
      medium<br/>
      thick<br/>
<i>length<br/>
</i>inherit</td>
<td>2</td>
</tr>
</tbody></table> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    